<!DOCTYPE html>
<html>
<head>
	<title>任务七：实现常见的技术产品官网的页面架构及样式布局</title>
	<link rel="stylesheet" type="text/css" href="test7.css">
	<meta charset="utf-8">
</head>
<body>
	<div class="container">
		<div class="header">
			<div class="newworld">
				<a href="" id="a_newworld">
					<img src="top_1.png" alt="The New World"/>
					<label>
						新世界
					</label>
				</a>	
			</div>
			<ul>
				<li>
					<div class="textdoc">
						<a href="">首页</a>
					</div>
				</li>
				<li>
					<div class="textdoc">
						<a href="">最新活动</a>
					</div>
				</li>
				<li>
					<div class="textdoc">
						<a href="">项目介绍</a>
					</div>
				</li>
				<li>
					<div class="textdoc">
						<a href="">爱心社区</a>
					</div>
				</li>
				<li>
					<div class="textdoc">
						<a href="">关于我们</a>
					</div>
				</li>
				<li>
					<a href="">
						<img src="top_2.png" alt="" class="login" />
						<span>登录</span>
					</a>
				</li>
			</ul>
		</div>
		<div class="bodyer">
			<div class="life">
				<div class="lifeblank"></div>
				<div class="lifetop">
					<p>Time of new life</p>
				</div>
				<div class="lifemiddle">
					<p>
						新时代 ，年轻的人们让我们一起
						<br/>
						体验新生活 , 享受新生活
					</p>
				</div>
				<div class="lifebtn">
					<a href="">
						<input type="button" name="Start" id="start" value="开始体验" />
					</a>
				</div>
			</div>
			<div class="list">
				<table>
					<tr class="list1">
						<td><img src="second_1.png" alt=""></td>
						<td><img src="second_2.png" alt=""></td>
						<td><img src="second_3.png" alt=""></td>
						<td><img src="second_4.png" alt=""></td>
					</tr>
					<tr class="list2">
						<td class="td1">
							打造全新的世界观，让你更
							<br/>
							爱你的生活
						</td>
						<td class="td2">	
							丰富多彩的公益活动，发
							<br/>
							挥新世界的主人公意识
						</td>
						<td class="td3">
							时尚的新理念，超前体验
							<br/>
							未知的生活
						</td>
						<td class="td4">
							完善的培养机制，培养你
							<br/>
							全新的世界观
						</td>
					</tr>
				</table>
			</div>
			<div class="what">	
				<img src="top_1.png" alt=""/>
				<p>关于新世界，你不知道的还有什么？</p>
			</div>
			<div class="map">
				<div class="thehead">
					<div class="message1">
						<p>查找新世界城市活动信息</p>
					</div>
					
					<div class="border">
						<img src="heng2.png" />
					</div>
					<div class="message2">
						<p>	
							每个城市都有不同的活动信息，请自主查询您所需要了解的城市
						</p>
					</div>
				</div>
				<div class="theform">			
					<form action="post" method="get" accept-charset="utf-8">
						
						<select name="country">
							<option value="">请选择国家</option>
							<option value="">中国</option>
							<option value="">America</option>
							<option value="">Japan</option>
							<option value="">Britain</option>
						</select>
						<select name="province">
							<option value="">请选择省份</option>
							<option value="">四川省</option>
							<option value="">北京市</option>
							<option value="">天津市</option>
							<option value="">河北省</option>
							<option value="">辽宁省</option>				
						</select>
						<select name="city">
							<option value="">请选择城市</option>
							<option value="">成都市</option>
							<option value="">泸州市</option>
							<option value="">内江市</option>
							<option value="">资阳市</option>
							<option value="">绵阳市</option>
							<option value="">德阳市</option>						
						</select>
						<input type="button" name="" value="搜&nbsp;&nbsp;&nbsp;索" />
					</form>
				</div>
			</div>
			<div class="activity">
				<div class="beijing">
					<div>
						<img src="2-1.gif" alt="">
					</div>
					
					<p class="thetitle">北京活动</p>
					<!-- <br/> -->
					<p class="thebottom">新社区大联盟</p>
					
				</div>
				<div class="shanghai">
					<div>
						<p class="thetitle">上海活动</p>
						<p class="thebottom">夜上海新景观探索</p>
					</div>
					<div>
						<img src="2-2.gif" alt="">
					</div>
				</div>
				<div class="shenzhen">
					<div>
						<img src="2-3.gif" alt="">
					</div>
					<div>
						<p class="thetitle">
							深圳活动
						</p>
						<!-- <br/> -->
						<p class="thebottom">全新海岸线观点站</p>
					</div>
				</div>
				<div class="hongkong">
					<div>
						<img src="2-4.gif">
					</div>
					<div>
						<p class="thetitle">香港活动</p>
						<!-- <br/> -->
						<p  class="thebottom">奢侈消费大派送</p>
					</div>
				</div>
			</div>
			<div class="moremessage">
				<div class="left">
					<p class="one">新世界</p>
					<p class="two">TIME</p>
					<p class="three">@新世界 - 北京</p>
					<p class="four">2016.04.01</p>
				</div>
				<div class="right">
					<div class="thetitle">
						<p>新世界 /<span style="color: red;"> 01</span></p>
					</div>
					<div class="san">
						
					</div>
					<div class="thep">	
						<p>
							新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是个新世界新世界是
						</p>
					</div>
					<div class="theb">
						<a href="">
							<input type="button" name="" value="更多详情">
						</a>
						<ul>
							<li>
								<div class="yuan1" style="background-color: #373737">	
								</div>
							</li>
							<li>
								<div class="yuan2">
									
								</div>
							</li>
							<li>
								<div class="yuan3">
									
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="newmore">
				<div class="left">
					<div class="thetop">
						<p>新时代</p>
					</div>
					<div class="themiddle">
						<p>关于爱生活的我们</p>
					</div>
					<div class="heng"></div>
					<div class="thehref">
						<a href="">
							<input type="button" name="" value="查看更多" />
						</a>
					</div>
				</div>
				<div class="middle">
					<div class="thetop">
						<p>新时代</p>
					</div>
					<div class="themiddle">
						<p>关于爱生活的我们</p>
					</div>
					<div class="heng"></div>
					<div class="thehref">
						<a href="">
							<input type="button" name="" value="查看更多" />
						</a>
					</div>
				</div>
				<div class="sanjiao"></div>
				<div class="right">
				</div>
			</div>
			<div class="volunteer">
				<div class="top">
					<div class="thet">
						<p>成为我们的志愿者</p>
					</div>
					<div class="heng"></div>
					<div class="thep">
						<p>新世界的大家庭需要每一个爱生活的人的加入，如果你够年轻，有梦想，有激情</p>
						<p>那就不要犹豫，快来加入我们，成为改变所有人的人</p>
					</div>
				</div>
				<div class="bottom">
					<div class="left">
						<div class="top1">
							<p>新世界志愿者协议</p>
						</div>
						<div class="top2">
							<p>加入新世界志愿者的人员必须遵守中华人民共和国的相关法律法规，并且本着平等资源的原则......</p>
						</div>
						<div class="more1">
							<p>
								<a href="">more</a>
							</p>
						</div>
						<br/>
						<div class="top3">
							<p>新世界志愿者权利</p>
						</div>
						<div class="top4">
							<p>新世界志愿者享受新世界内部所有资源共享的权利，并且享受所在新世界活动的优先参与资格</p>
						</div>
						<div class="more2">
							<p>
								<a href="">more</a>
							</p>
						</div>
						<br/>
						<div class="top5">
							<p>更多条款</p>
						</div>
						<div class="more3">
							<p>
								<a href="">more</a>
							</p>
						</div>
					</div> 
					<div class="right">
						<form action="post">
							<div class="nameage">
								<div class="name">
									<span>姓名：</span>
									<input type="text" name="name"/>
								</div>
								<div class="age">
									<span>年龄：</span>
									<input type="text" name="age"/>
								</div>
							</div>
							<div class="teladd">
								<div class="tel">
									<span>联系方式：</span>
									<input type="text" name="tel">
								</div>
								<div class="address">
									<span>联系地址：</span>
									<input type="text" name="address"/>
								</div>
							</div>
							<div class="mydream">
								<p>请简述您梦想的生活:</p>
								<textarea name=""></textarea>
							</div>
							<div class="submit">
								<a href="">提交申请</a>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="callme">
				<div class="title">
					<p>联系我们</p>
				</div>
				<div class="message">
					<p>为了更好的获取我们最新的产品资源，您可以留下您的电子邮箱快速订阅我们的产品资讯<br/>也可以通过以下任何方式关注我们动态</p>
				</div>
				<div class="button">
					<input type="text" name="" class="kuang" placeholder="someone@email.com" />
					<input type="button" name="" value="提交"  class="anniu" />
				</div>
				<div class="list">
					<ul>
						<li><img src="bottom_1.png"/></li>
						<li><img src="bottom_2.png"/></li>
						<li><img src="bottom_3.png"/></li>
						<li><img src="bottom_4.png"/></li>
					</ul>
				</div>
			</div>
			<div class="bottom">
				<div class="left">
					<span>@2016新世界</span>	
				</div>
				<div class="right">
					<a href="">Back to top</a>
				</div>				
			</div>
		</div>
		
	</div>
</body>
</html>